import React, { useState } from "react";

import { Button, Layout, Menu, theme } from "antd";
import CommonAsider from "../components/commonAsider";
import CommonHeader from "../components/commonHeader";
import {useSelector } from "react-redux"
import { Outlet } from "react-router-dom";
const { Header, Sider, Content } = Layout;

const Main = () => {
  // const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  //点击展开菜单
  const Collapsed=useSelector(state=>state.tab.isCollapsed)
  return (
    <Layout className="main-container">
      <CommonAsider  Collapsed={Collapsed}/>
      <Layout>
        <CommonHeader Collapsed={Collapsed} />
        <Content
          style={{
            margin: "24px 16px",
            padding: 24,
            minHeight: 280,
            background: colorBgContainer,
            borderRadius: borderRadiusLG,
          }}
        >
          <Outlet></Outlet>
        </Content>
      </Layout>
    </Layout>
  );
};

export default Main;
